<template>
  <div>
    <Dialog v-model:visible="props.groupUserVisible" :style="{ width: '50vw' }" position="top" :modal="true"
      :draggable="false" :show-header="false">

      <div class="flex h-20rem">
        <div class="w-5">
          <div class="p-inputgroup">
            <InputText placeholder="输入用户名" v-model="searchKeyword" />
            <Button icon="pi pi-search" severity="success" @click="handleSearch"/>
          </div>
          <div class="flex flex-column gap-3 mt-3 mb-3 overflow-y-auto h-17rem">
            <div v-for="user of chatStore.friendList" :key="user.userId" class="flex align-items-center">
                <Checkbox v-model="selectedUsers" :inputId="user.userId" name="user" :value="user" />
                <Avatar :image="user.avatar" class="mr-2 ml-2" shape="circle" />
                <label :for="user.userId">{{ user.username }}</label>
            </div>
          </div>
        </div>
        <Divider layout="vertical" />
        <div class="flex-1">
          <div class="h-18rem">
            <div class="mb-2 text-sm">选择联系人：<span>已选择{{ selectedUsers.length }}人</span></div>
            <Avatar v-for="item in selectedUsers" :image="item.avatar" class="mr-2 ml-2 mb-2"  />
          </div>
          <div class="flex justify-content-end">
            <Button label="No" icon="pi pi-times" @click="handleNo" text />
            <Button label="Yes" icon="pi pi-check" @click="handleYes" autofocus />
          </div>
        </div>
      </div>
    </Dialog>
  </div>
</template>

<script setup lang="ts">
import type { TUserModel } from '@/stores/typings/chat';
import { Dialog, Button, InputText, Divider, Checkbox, Avatar } from '@/utils/primevue'
import { ref, reactive } from 'vue';
import useChatStore from '@/stores/chat'

const chatStore = useChatStore()
const searchKeyword = ref('')

const selectedUsers = ref<TUserModel[]>([])

type TProps = {
  groupUserVisible: boolean,
  // friendList: TUserModel[]
}
const props = defineProps<TProps>()
const emits = defineEmits(['update:groupUserVisible'])

const handleSearch = () => {
  console.log('s', selectedUsers)
}

const handleNo = () => {
  emits('update:groupUserVisible', false)
  selectedUsers.value = []
}

const handleYes = () => {
  const friendIdList = selectedUsers.value.map(item => item.userId)
  console.log('selectedUsers', friendIdList)

  chatStore.usersJoinGroup(friendIdList)
  emits('update:groupUserVisible', false)

}
</script>

<style scoped lang="scss">
</style>
